<template>
  <div class="system-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-form
        ref="settingsForm"
        :model="settings"
        label-width="120px"
        class="settings-form"
      >
        <!-- 基本设置 -->
        <div class="settings-section">
          <h3>基本设置</h3>
          <el-form-item label="系统名称">
            <el-input v-model="settings.systemName" />
          </el-form-item>
          <el-form-item label="系统Logo">
            <el-upload
              class="logo-uploader"
              action="/api/admin/upload"
              :show-file-list="false"
              :on-success="handleLogoSuccess"
              :before-upload="beforeLogoUpload"
            >
              <img v-if="settings.logo" :src="settings.logo" class="logo" />
              <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 安全设置 -->
        <div class="settings-section">
          <h3>安全设置</h3>
          <el-form-item label="密码最小长度">
            <el-input-number 
              v-model="settings.minPasswordLength" 
              :min="6" 
              :max="20"
            />
          </el-form-item>
          <el-form-item label="登录失败锁定">
            <el-switch
              v-model="settings.loginLockEnabled"
              @change="handleLockChange"
            />
          </el-form-item>
          <el-form-item 
            label="锁定阈值" 
            v-if="settings.loginLockEnabled"
          >
            <el-input-number 
              v-model="settings.loginLockThreshold" 
              :min="3" 
              :max="10"
            />
            <span class="form-tip">次失败后锁定账号</span>
          </el-form-item>
        </div>

        <!-- 数据设置 -->
        <div class="settings-section">
          <h3>数据设置</h3>
          <el-form-item label="数据保留时间">
            <el-select v-model="settings.dataRetentionPeriod">
              <el-option label="7天" value="7" />
              <el-option label="30天" value="30" />
              <el-option label="90天" value="90" />
              <el-option label="180天" value="180" />
              <el-option label="365天" value="365" />
            </el-select>
          </el-form-item>
          <el-form-item label="自动备份">
            <el-switch v-model="settings.autoBackup" />
          </el-form-item>
          <el-form-item 
            label="备份周期" 
            v-if="settings.autoBackup"
          >
            <el-select v-model="settings.backupFrequency">
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
              <el-option label="每月" value="monthly" />
            </el-select>
          </el-form-item>
        </div>

        <!-- 通知设置 -->
        <div class="settings-section">
          <h3>通知设置</h3>
          <el-form-item label="邮件通知">
            <el-switch v-model="settings.emailNotification" />
          </el-form-item>
          <template v-if="settings.emailNotification">
            <el-form-item label="SMTP服务器">
              <el-input v-model="settings.smtpServer" />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input v-model="settings.smtpPort" />
            </el-form-item>
            <el-form-item label="发件邮箱">
              <el-input v-model="settings.senderEmail" />
            </el-form-item>
            <el-form-item label="邮箱密码">
              <el-input v-model="settings.emailPassword" type="password" />
            </el-form-item>
          </template>
        </div>

        <div class="form-actions">
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

// 系统设置数据
const settings = reactive({
  systemName: '云数据管理平台',
  logo: '',
  minPasswordLength: 8,
  loginLockEnabled: false,
  loginLockThreshold: 5,
  dataRetentionPeriod: '30',
  autoBackup: false,
  backupFrequency: 'daily',
  emailNotification: false,
  smtpServer: '',
  smtpPort: '',
  senderEmail: '',
  emailPassword: ''
});

// 初始化设置
const initSettings = async () => {
  try {
    const response = await fetch('https://penglink.pcwxcn.top/api/admin/settings');
    const data = await response.json();
    if (data.code === 200) {
      Object.assign(settings, data.data);
    }
  } catch (error) {
    ElMessage.error('获取系统设置失败');
  }
};

// Logo上传相关
const handleLogoSuccess = (res) => {
  settings.logo = res.url;
  ElMessage.success('Logo上传成功');
};

const beforeLogoUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件！');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！');
    return false;
  }
  return true;
};

// 处理登录锁定变化
const handleLockChange = (val) => {
  if (!val) {
    settings.loginLockThreshold = 5;
  }
};

// 保存设置
const saveSettings = async () => {
  try {
    const response = await fetch('https://penglink.pcwxcn.top/api/admin/settings', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      },
      body: JSON.stringify(settings)
    });
    
    const data = await response.json();
    if (data.code === 200) {
      ElMessage.success('设置保存成功');
    } else {
      ElMessage.error(data.msg || '保存失败');
    }
  } catch (error) {
    ElMessage.error('保存设置失败');
  }
};

// 重置设置
const resetSettings = () => {
  initSettings();
  ElMessage.success('设置已重置');
};

// 初始化
initSettings();
</script>

<style scoped>
.system-settings {
  padding: 20px;
}

.settings-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.settings-section h3 {
  margin-bottom: 20px;
  color: #303133;
  font-weight: 500;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.logo-uploader {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.logo-uploader:hover {
  border-color: #409EFF;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.logo {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: contain;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}
</style> 